<template>
  <div>
    <van-nav-bar left-arrow @click-left="router.go(-1)">
      <template #left>
        <van-icon name="arrow-left" size="22px" />
      </template>
      <template #right>
        <van-icon name="ellipsis" size="22px" />
      </template>
    </van-nav-bar>

    <div class="top">
      <div class="img">
        <van-image fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg" />
      </div>
      <div class="right">
        <h4>{{ userName }}</h4>
        <p>微信号:rcc7220</p>
        <p>地区:南京</p>
      </div>
    </div>

    <van-cell class="van-cell-one" title="备注和标签" clickable is-link />
    <van-cell clickable>
      <template #title>
        <span>电话号码</span>
        &nbsp;
        <span style="color: #1989fa">18195788069</span>
      </template>
    </van-cell>
    <van-cell title="朋友圈权限" clickable is-link />
    <div class="spac" />
    <van-cell title="朋友圈" clickable is-link />
    <van-cell title="更多信息" clickable is-link />
    <div class="spac" />
    <van-cell class="buttom-1" clickable @click="goIm">
      <template #title>
        <div style="color: #1989fa; text-align: center">
          <van-icon name="chat-o" />发消息
        </div>
      </template>
    </van-cell>
    <van-cell class="buttom-2" clickable @click="goVideoChat">
      <template #title>
        <div style="color: #1989fa; text-align: center">
          <van-icon name="phone-o" />
          音视频通话
        </div>
      </template>
    </van-cell>
  </div>
</template>

<script lang="ts">
export default { name: "ContactInfo" };
</script>

<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
// import {Vue } from "vue"
// export default export Vue {
//   name: "contactInfo",
// };

let router = useRouter();
let route = useRoute();
let { userName, id } = route.query;

function goIm() {
  router.push({
    path: "/im",
    query: {
      userName,
      id,
    },
  });
}

const goVideoChat = () => {
  router.push({
    path: "/videoChat",
    query: {
      userName,
      id,
    },
  });
};
</script>

<style scoped lang="scss">
.van-icon {
  color: var(--van-black);
}
.top{
  display: flex;
  padding:48px;
  font-size: 30px;
  background-color: var(--van-white);
  color: var(--van-black);
  .img{
    align-self:center;
    width: 130px;
    height:130px;
    margin-right: 40px;
    border-radius: 10px;
    overflow: hidden;
    .van-image{
      width: 100%;
      height: 100%;
    }
  }
  h4{
    margin: 0;
    font-size: 40px;
    font-weight: 500;
  }
  p{
    margin: 0;
    margin-top: 12px;
    font-size: 28px;
  }
}

.van-cell{
  font-size: 30px;
  .van-icon{
    color: #1989fa;
    font-size: 30px;
    margin-right: 15px;
  }
  &::after{
    right: 0;
  }
}

.buttom-1,.buttom-2{
   &::after{
    left: 0;
  }
}
::v-deep .van-cell-one::before{
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    right: 0;
    top: 0;
    left: var(--van-padding-md);
    border-bottom: 2px solid var(--van-cell-border-color);
    transform: scaleY(.5);
}
</style>